<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/1/28
  Time: 18:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>排版</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/libs/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/libs/bootstrap/js/bootstrap.js"></script>
</head>
<body>

<%-- 标题 --%>
<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <h1>
                我是标题 H1
                <small>我是副标题 H1</small>
            </h1>
        </div>

        <div class="col-sm-2">
            <h2>
                我是标题 H2
                <small>我是副标题 H2</small>
            </h2>
        </div>

        <div class="col-sm-2">
            <h3>
                我是标题 H3
                <small>我是副标题 H3</small>
            </h3>
        </div>

        <div class="col-sm-2">
            <h4>
                我是标题 H4
                <small>我是副标题 H4</small>
            </h4>
        </div>

        <div class="col-sm-2">
            <h5>
                我是标题 H5
                <small>我是副标题 H5</small>
            </h5>
        </div>

        <div class="col-sm-2">
            <h6>
                我是标题 H6
                <small>我是副标题 H6</small>
            </h6>
        </div>
    </div>

    <%-- 引导主体副体 --%>
    <div class="row">
        <div class="col-sm-2">
            <h1>引导主体副体</h1>
        </div>
        <div class="col-sm-10">
            <p class="lead">
                这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
            </p>
        </div>
    </div>

    <%-- 强调 --%>
    <div class="row">
        <div class="col-sm-3">
            <small>本行内容在标签内</small>
            <strong>本行内容在标签内，呈现粗体</strong>
            <em>本行内容再标签内，呈现斜体</em>
        </div>
        <div class="col-sm-1">
            <p class="text-left">文本左对齐</p>
        </div>
        <div class="col-sm-1">
            <p class="text-right">文本右对齐</p>
        </div>
        <div class="col-sm-1">
            <p class="text-center">
                文本居中对齐
            </p>
        </div>
        <div class="col-sm-1">
            <p class="text-muted">文本内容是减弱的</p>
        </div>
        <div class="col-sm-1">
            <p class="text-primary">文本内容带有一个  primary class</p>
        </div>
        <div class="col-sm-1">
            <p class="text-success">文本内容带有一个 success class</p>
        </div>
        <div class="col-sm-1">
            <p class="text-info">文本内容带有一个 info class</p>
        </div>
        <div class="col-sm-1">
            <p class="text-warning">文本内容带有一个 warning class</p>
        </div>
        <div class="com-sm-1">
            <p class="text-danger">文本内容带有一个 danger class</p>
        </div>
    </div>

    <%-- 缩写 --%>
    <div class="row">
        <div class="col-sm-6">
            <abbr title="World Wide Web">WWW</abbr>
        </div>
        <div class="col-sm-6">
            <abbr title="Real Simple Syndication">RSS</abbr>
        </div>
    </div>

    <%-- 地址 --%>
    <div class="row">
        <div class="col-sm-6">
            <address>
                <strong>Some Company, Inc.</strong><br>
                007 street<br>
                Some City, State XXXXX<br>
                <abbr title="Phone">P:</abbr>（123）456-789
            </address>
        </div>
        <div class="col-sm-6">
            <address>
                <strong>Full Name</strong><br>
                <a href="mailto:#">mailto@somedomain</a>
            </address>
        </div>
    </div>

    <%-- 引用 --%>
    <div class="row">
        <div class="col-sm-4">
            <blockquote>
                <p>
                    这是一个默认的引用实例这是一个默认的引用实例这是一个默认的引用实例
                </p>
            </blockquote>
        </div>
        <div class="col-sm-4">
            <blockquote>
            这是一个带有源标题的引用
            <small>
                Someone famous in <cite title="Source Title">Source Titme</cite>
            </small>
            </blockquote>
        </div>
        <div class="col-sm-4">
            <blockquote>
                这是一个向右对齐的引用。
                <small>
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </blockquote>
        </div>
    </div>

    <%-- 列表 --%>
    <div class="row">
        <div class="col-sm-2">
            <h4>有序列表</h4>
            <ol>
                <li>有序列表 1</li>
                <li>有序列表 2</li>
                <li>有序列表 3</li>
                <li>有序列表 4</li>
            </ol>
        </div>
        <div class="col-sm-2">
            <h4>无序列表</h4>
            <ul>
                <li>无序列表 1</li>
                <li>无序列表 2</li>
                <li>无序列表 3</li>
                <li>无序列表 4</li>
            </ul>
        </div>
        <div class="col-sm-2">
            <h4>未定义样式列表</h4>
            <ul class="list-unstyled">
                <li>未定义样式列表 1</li>
                <li>未定义样式列表 2</li>
                <li>未定义样式列表 3</li>
                <li>未定义样式列表 4</li>
            </ul>
        </div>
        <div class="col-sm-2">
            <h4>内联列表</h4>
            <ul class="list-inline">
                <li>内联列表 1</li>
                <li>内联列表 2</li>
                <li>内联列表 3</li>
                <li>内联列表 4</li>
            </ul>
        </div>
        <div class="col-sm-2">
            <h4>定义列表</h4>
            <dl>
                <dt>Key 1</dt>
                <dd>Value 1</dd>
                <dt>Key 2</dt>
                <dd>Value 2</dd>
            </dl>
        </div>
        <div class="col-sm-2">
            <h4>水平的定义列表</h4>
            <dl class="dl-horizontal">
                <dt>描述 1</dt>
                <dd>值 1</dd>
                <dt>描述 2</dt>
                <dd>值 2</dd>
            </dl>
        </div>

    </div>



</div>

<%-- 内联子标题 --%>

<%-- 引导主体副体 --%>

<%-- 强调 --%>

<%-- 缩写 --%>

<%-- 地址 --%>

<%-- 引用 --%>

<%-- 列表 --%>

</body>
</html>
